<template>
  <div class="swiper">
    <div class="swiper-container swiper-container-id">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(thumbUrl,index) in thumbUrls" :key="index">
          <img :src="thumbUrl.image" altÏ />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

export default {
  props: {
    thumbUrls: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data () { },
  methods: {
    bannerSumbit () {
      console.dir(12)
    }
  },

  mounted () {},

  watch: {
    thumbUrls () {
      if (this.swiper) {
        this.swiper.destroy()
      }
      const _that = this
      this.$nextTick(function () {
        this.swiper = new Swiper('.swiper-container-id', {
          autoplay: {
            delay: 5000, // 5秒切换一次
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          loop: true,
          on: {
            tap: function () {
              _that.bannerSumbit()
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.swiper {
  .swiper-container {
    height: 500px;
    border-radius: 20px;
    img {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      border-radius: 20px;
      overflow: hidden;
    }
  }
}
</style>
